import { View, Image, Text } from "@tarojs/components";
import React from "react";
import "./index.scss";

type OrderItemProps = {
  state?: "order" | "service";
};

const OrderItem: React.FC<OrderItemProps> = ({ state = "order" }) => {
  return (
    <View className="order-item">
      <View className="top-view">
        <View className="top-left">
          <Image className="icon" src="" />
          <Text className="address one-line">
            洪山区欢乐大道华侨城小区2栋1单元100000室
          </Text>
        </View>
        <View className="top-right">
          <Text className="status">已完成</Text>
          <Image className="right-arrow " src="" />
        </View>
      </View>

      <View className="center">
        {Array(10)
          .fill("鸡胸肉炒山药鸡胸肉炒山药")
          .map((item, index) => {
            return (
              <View className="foods-item" key={index}>
                <Image
                  className="food-img"
                  src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1320386730,3153153183&fm=26&gp=0.jpg"
                />
                <Text className="food-name one-line">{item}</Text>
              </View>
            );
          })}
      </View>

      <View className="bottom-view">
        <Text className="time">2021-05-20 14:00</Text>
        <View className="price-view">
          实付：
          <View className="price">
            ￥<Text className="number">22</Text>
          </View>
        </View>
      </View>

      <View className="btn-view">
        <View className="comment">
          {state == "order" ? "去评价" : "取消售后"}
        </View>
        <View className="report">营养报告</View>
      </View>
    </View>
  );
};

export default OrderItem;
